@import (reference) '../../style/constants';

#notification {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;

  .notices {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    pointer-events: none;

    i {
      font-size: 0.32rem;
      vertical-align: text-bottom;
    }

    span {
      vertical-align: super;
    }

    .iconfont {
      color: lighten(@color-blue, 10%);
      vertical-align: baseline;
    }

    .icon-error {
      color: @color-orange;
    }
  }

  .notice {
    box-sizing: border-box;
    width: 2.88rem;
    padding: 0.2rem 0.14rem;
    margin-bottom: 0.14rem;
    font-size: 0.16rem;
    color: @color-white;
    pointer-events: none;
    background-color: fade(@color-black, 80%);
    border-radius: 0.05rem;
    box-shadow: 0 0.02rem 0.04rem 0 fade(@color-black, 30%);
    transition: all 0.2s ease;
    transform: scale3d(0.1, 0.1, 0.1);

    &.show {
      transform: scale3d(1, 1, 1);
    }
  }

  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    pointer-events: auto;
    background-color: fade(@color-black, 20%);
  }

  &.show {
    display: block;
  }
}

.spinner {
  width: 0.3rem;
  height: 0.3rem;
  background-color: #fff;
  animation: sk-rotateplane 3s infinite ease-in-out;
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(0.8rem) rotateX(0deg) rotateY(0deg);
  }

  25% {
    transform: perspective(0.8rem) rotateX(-180deg) rotateY(0deg);
  }

  50% {
    transform: perspective(0.8rem) rotateX(-180deg) rotateY(-180deg);
  }

  75% {
    transform: perspective(0.8rem) rotateX(0deg) rotateY(-180deg);
  }

  100% {
    transform: perspective(0.8rem) rotateX(0deg) rotateY(0deg);
  }
}
